<!DOCTYPE html>
<html data-th-replace="~{layout :: layout(~{::head/content()}, 'guides', ~{::div})}">
<head>
    <title>Spring | Guides</title>
    <meta property='og:title' content=''/>
    <meta property='og:description' content=''/>
</head>
<body>
<div>
    <div id='hero' class='bg-lightblue' role='Banner'>
        <div class='container'>
            <div class='flex jc-between ai-center mb-3'>
                <img class='img img-light' data-th-src="@{/images/guides.svg}" alt=''>
                <img class='img img-dark' data-th-src="@{/images/guides-dark.svg}" alt=''>
                <div class='text'>
                    <h1 class='h1 antialiased'>Guides</h1>
                    <p class='big'>Whatever you're building, these guides are designed to get you productive as quickly as possible – using the latest Spring project releases and techniques as recommended by the Spring team.</p>
                </div>
            </div>
            <div id='jump-cards' class='flex jc-between'>
                <a href='#getting-started-guides' class='jump-card rad-5 shadow-hover border-dark border-box center'>
                    <h3 class='h3 antialiased'>Getting Started Guides</h3>
                    <p class='m-0'>15-30 minutes</p>
                    <div class='jump-arrow mx-auto'></div>
                </a>
                <a href='#topical-guides' class='jump-card rad-5 shadow-hover border-dark border-box center'>
                    <h3 class='h3 antialiased'>Topical Guides</h3>
                    <p class='m-0'>60 minutes or less</p>
                    <div class='jump-arrow mx-auto'></div>
                </a>
                <a href='#tutorials' class='jump-card rad-5 shadow-hover border-dark border-box center'>
                    <h3 class='h3 antialiased'>Tutorials</h3>
                    <p class='m-0'>2-3 hours</p>
                    <div class='jump-arrow mx-auto'></div>
                </a>
            </div>
        </div>
    </div>
    <div class='content' role='Main'>
        <div id='getting-started-guides' class='container mb-6'>
            <h2 class='h2 antialiased'>Getting Started Guides</h2>
            <section id='started-and-search' class='flex jc-between mb-3'>
                <p class='guide-description m-0'>Designed to be completed in 15-30 minutes, these guides provide quick, hands-on instructions for building the "Hello World" of any development task with Spring. In most cases, the only prerequisites are a JDK and a text editor.</p>
                <div id='search-container' class='rel'>
                    <input id='guide-search' class='border-box' placeholder='Find a guide' />
                    <div id="guide-search-icon" data-th-insert="~{svg/_icons :: icon-search}"></div>
                </div>
            </section>
            <section id='getting-started-list' class='flex jc-between flex-wrap'>
                <div id="guide-search-no-result" class="guide-search-no-result">No result found.</div>
                <div data-th-each="guide : ${guides}" class='guide guide-search half border-box flex' data-th-attr="data-filterable=${guide.title}+' '+${guide.description}+' '+${guide.projects}">
                    <div class="guide-icon" data-th-insert="~{svg/_icons :: icon-guides-start}"></div>
                    <div class='text'>
                        <a class='guide-link bold blue link-darken antialiased' data-th-href="@{'/guides/gs/'+${guide.name}+'/'}" data-th-text="${guide.title}">Building a RESTful Web Service</a>
                        <p class='m-0' data-th-text="${guide.description}">Learn how to create a RESTful web service with Spring.</p>
                    </div>
                </div>
            </section>
        </div>
        <section id='topical-guides' class='mb-6'>
            <div class='container'>
                <div class='mb-3'>
                    <h2 class='h2 antialiased'>Topical Guides</h2>
                    <p class='guide-description m-0'>Designed to be read and comprehended in an hour or less, providing more wide-ranging or subjective content than a getting started guide.</p>
                </div>
                <section id='topical-guides-list' class='flex jc-between flex-wrap'>
                    <div data-th-each="topical : ${topicals}" class='guide half border-box flex' data-th-attr="data-filterable=${topical.title}+' '+${topical.description}">
                        <div class="guide-icon" data-th-insert="~{svg/_icons :: icon-guides-topic}"></div>
                        <div class='text'>
                            <a class='guide-link bold blue link-darken antialiased' data-th-href="@{'/guides/topicals/'+${topical.name}+'/'}" data-th-text="${topical.title}">Spring Security Architecture</a>
                            <p class='m-0' data-th-text="${topical.description}">Topical guide to Spring Security, how the bits fit together and how they interact with Spring Boot.</p>
                        </div>
                    </div>
                </section>
            </div>
        </section>
        <section id='tutorials' class='mb-6'>
            <div class='container'>
                <div class='mb-3'>
                    <h2 class='h2 antialiased'>Tutorials</h2>
                    <p class='guide-description m-0'>Designed to be completed in 2-3 hours, these guides provide deeper, in-context explorations of enterprise application development topics, leaving you ready to implement real-world solutions.</p>
                </div>
                <section id='tutorials-list' class='flex jc-between flex-wrap'>
                    <div data-th-each="tutorial : ${tutorials}" class='guide half border-box flex' data-th-attr="data-filterable=${tutorial.title}+' '+${tutorial.description}">
                        <div class="guide-icon" data-th-insert="~{svg/_icons :: icon-guides-tutorial}"></div>
                        <div class='text'>
                            <a class='guide-link bold blue link-darken antialiased' data-th-href="@{'/guides/tutorials/'+${tutorial.name}+'/'}" data-th-text="${tutorial.title}">Building REST services with Spring</a>
                            <p class='m-0' data-th-text="${tutorial.description}">Learn how to easily build RESTful services with Spring.</p>
                        </div>
                    </div>
                </section>
            </div>
        </section>
    </div>
    <script data-th-src="@{/js/guide.js}"></script>
</div>
</body>
</html>